<template>
  <div>
    <el-drawer
      :visible.sync="drawer3"
      :with-header="true"
      direction="rtl"
      custom-class="drawerPublic"
    >
      <div class="drawer-w">
        <el-tabs v-model="activeName4" @tab-click="handleClickTab4">
          <el-tab-pane label="告警" name="e1">
            <div class="drawer-block-h">
              <el-collapse
                accordion
                v-model="gaojcurrent"
                @change="gaojChange(gaojcurrent)"
              >
                <el-collapse-item
                  :name="item.name"
                  v-for="(item, index) in gaojlist"
                  :key="index"
                >
                  <template slot="title">
                    <el-row style="flex: 1; height: 100%">
                      <el-col :span="3">
                        <el-avatar
                          size="medium"
                          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                          style="vertical-align: middle"
                        ></el-avatar>
                      </el-col>
                      <el-col :span="18" class="gj_info_tip gj_info_tip_text">
                        <div class="gj_info_tip_text_title">
                          设备05000001监控到一条异常信息
                        </div>
                        <div
                          class="gj_info_tip_text_desc"
                          v-if="gaojcurrent == item.name ? false : true"
                        >
                          2023-05-19 17:57
                        </div>
                      </el-col>
                      <el-col :span="3" class="gj_info_tip">
                        <div>
                          <i
                            class="header-icon el-icon-info text-yellow-color gj_info_tip_icon"
                          ></i>
                          <div class="gj_info_tip_p text-blue-color">详情</div>
                        </div>
                      </el-col>
                    </el-row>
                  </template>
                  <el-row>
                    <el-col :span="18" :offset="3">
                      <el-row>
                        <el-col :span="24">发生时间：2023-05-19 17:57</el-col>
                        <el-col :span="24"
                          >发生地点：<el-link
                            :underline="false"
                            type="primary"
                            style="font-size: 13px"
                            >深圳市-西丽湖问山叠水驿站</el-link
                          ></el-col
                        >
                        <el-col :span="24">异常类型：水位上涨</el-col>
                        <el-col :span="24">所属辖区：深圳市XXXX大队</el-col>
                        <el-col :span="24"
                          >正在值班：杨静云<i
                            class="el-icon-phone text-green-color gj_info_tip_icon_tel"
                            @click.stop="gaojTel(item)"
                          ></i
                        ></el-col>
                        <el-col :span="24">
                          <div class="gj_info_tip_video_wrap">
                            <video src="" class="gj_info_tip_video"></video>
                          </div>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 告警弹窗
      drawer3: false,
      activeName4: "e1",
      gaojlist: [
        { name: "a1" },
        { name: "a2" },
        { name: "a3" },
        { name: "a4" },
      ], //告警list
      gaojcurrent: "a1", //告警当前选中值
    };
  },
  mounted() {},
  methods: {
    // 初始化
    init() {
      this.drawer3 = true;
    },
    // 告警弹窗-tab切换事件
    handleClickTab4(tab) {
      this.activeName4 = tab.name;
    },
    //告警面板手风琴选中值
    gaojChange(val) {
      console.log("告警面板手风琴选中值", val);
      this.gaojcurrent = val;
    },
    //告警面板手风琴-告警电话
    gaojTel(item) {
      console.log("告警面板手风琴-告警电话", item);
    },
    // 告警弹窗-tab切换事件
    handleClickTab5(tab) {
      this.activeName5 = tab.name;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/emergency.scss";
</style>
<style lang="scss" scoped>
@import "../../../assets/emergency_gis.scss";
</style>